<template>
  <div class="context-frame" :style="style">
    <span
      v-for="(item,index) in menuList[data.type]"
      :key="index"
      class="context-item"
      @click="$emit(item.event,data.item,data.index,$event)"
    >{{ item.name }}</span>
  </div>
</template>
<script>
export default {
  name: 'ContextMenu',
  props: {
    data: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      menuList: {
        taskItemMenu: [{
          id: 'close',
          name: '关闭',
          event: 'taskItemClose'
        }],
        taskBarMenu: [{
          id: 'close all',
          name: '关闭所有',
          event: 'taskAllClose'
        }, {
          id: 'minimize all',
          name: '显示桌面',
          event: 'taskAllMinimize'
        }],
        deskItemMenu: [{
          id: 'open explorer',
          name: '打开',
          event: 'explorerOpen'
        }, {
          id: 'delete shortcut',
          name: '删除快捷方式',
          event: 'deskShortcutDelete'
        }],
        startMenu: [{
          id: 'open explorer',
          name: '打开',
          event: 'explorerOpen'
        }, {
          id: 'send to desktop',
          name: '发送到桌面',
          event: 'deskShortcutAdd'
        }]
      }
    }
  },
  computed: {
    style() {
      return this.data.type === 'taskBarMenu' || this.data.type === 'taskItemMenu' ? {
        left: `${this.data.axios.x}px`,
        bottom: '20px'
      } : {
        left: `${this.data.axios.x}px`,
        top: `${this.data.axios.y}px`
      }
    }
  },
  methods: {
    show(event) {
      this.axios = { ...this.axios, ...{ x: event.clientX, y: event.clientY }}
    }
  }
}
</script>
<style scoped>
.context-frame {
  display: flex;
  flex-flow: column nowrap;
  width: 10rem;
  background-color: #fff;
}
.context-item {
  height: 2rem;
  line-height: 2rem;
  padding: 0 1rem;
  border-bottom: .1rem solid;
  border-color:gray;
}
.context-item:hover {
  background-color: rgb(158, 157, 157) !important;
}
</style>
